﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
}
<div class="wmuSlider" style="height: 560px;">
    <div class="wmuSliderWrapper">
        <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">
                @foreach (var aSlider in ViewBag.Slider)
                {
                    <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="sl-slide-inner">
                            <div class="bg-img" style="background-image: url(@aSlider.SliderImage);"></div>
                            <h2>@aSlider.SliderTitle</h2>
                            <blockquote>
                                <p>@aSlider.SliderContent</p>
                                <cite>>@aSlider.SliderOauth</cite>
                            </blockquote>
                        </div>
                    </div>
                }
            </div>
            <!-- /sl-slider -->

            <nav id="nav-dots" class="nav-dots">
                @for (int i = 0; i < ViewBag.Slider.Count; i++)
                {
                    if (i == 0)
                    {
                    <span class="nav-dot-current"></span>
                    }
                    else
                    {
                    <span></span>
                    }

                }
            </nav>

        </div>
        <!-- /slider-wrapper -->
    </div>
</div>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
<script type="text/javascript">
    $(function () {

        var Page = (function () {

            var $nav = $('#nav-dots > span'),
                slitslider = $('#slider').slitslider({
                    onBeforeChange: function (slide, pos) {

                        $nav.removeClass('nav-dot-current');
                        $nav.eq(pos).addClass('nav-dot-current');

                    }
                }),

                init = function () {

                    initEvents();

                },
                initEvents = function () {

                    $nav.each(function (i) {

                        $(this).on('click', function (event) {

                            var $dot = $(this);

                            if (!slitslider.isActive()) {

                                $nav.removeClass('nav-dot-current');
                                $dot.addClass('nav-dot-current');

                            }

                            slitslider.jump(i + 1);
                            return false;

                        });

                    });

                };

            return { init: init };

        })();

        Page.init();

        /**
         * Notes: 
         * 
         * example how to add items:
         */

        /*
        
        var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
        
        // call the plugin's add method
        ss.add($items);

        */

    });
</script>
<div class="main">
    <div class="wrap">
        <div class="content-top">
            <div class="lsidebar span_1_of_c1">
                <p>Đồng hành cùng Mèo béo Guitar</p>
            </div>
            <div class="cont span_2_of_c1">
                <div class="social">
                    <ul>
                        <li class="facebook"><a href="#"><span></span></a>
                            <div class="radius">
                                <img src="images/radius.png"><a href="#"> </a>
                            </div>
                            <div class="border hide">
                                <p class="num">1.51K</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="social">
                    <ul>
                        <li class="twitter"><a href="#"><span></span></a>
                            <div class="radius">
                                <img src="images/radius.png">
                            </div>
                            <div class="border hide">
                                <p class="num">1.51K</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="social">
                    <ul>
                        <li class="google"><a href="#"><span></span></a>
                            <div class="radius">
                                <img src="images/radius.png">
                            </div>
                            <div class="border hide">
                                <p class="num">1.51K</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="social">
                    <ul>
                        <li class="dot"><a href="#"><span></span></a>
                            <div class="radius">
                                <img src="images/radius.png">
                            </div>
                            <div class="border hide">
                                <p class="num">1.51K</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="content-bottom">
            @{ int j = 0;
               int sales = 0;}
            @{ ViewBag.Data1 = "<div class='box1'>"; ViewBag.Data2 = "</div>";}
            @foreach (var aProduct in ViewBag.Product)
            {
                j++;
                if (j == 1)
                {
                @Html.Raw(ViewBag.Data1)
                }

                <div class="col_1_of_3 span_1_of_3">
                    <a href="single.html">
                        <div class="view view-fifth">
                            <div class="top_box">
                                <h3 class="m_1">@aProduct.ProductName</h3>
                                <p class="m_2">Mã số @aProduct.ProductCode</p>
                                <div class="grid_img">
                                    <div class="css3">
                                        <img src="@aProduct.ProductImage" alt="">
                                    </div>
                                    <div class="mask">
                                        <div class="info">Chi tiết</div>
                                    </div>
                                </div>
                                <div class="price">
                                    @if (aProduct.ProductStatus)
                                    {
                                        {
                                            sales = (int)(@aProduct.ProductCost - (aProduct.ProductSales * @aProduct.ProductCost) / 100);
                                            ViewBag.Sales = sales;
                                        }                                        
                                        <span class="pricenew">@aProduct.ProductCost vnđ</span>
                                        <span class="reducedfrom">@ViewBag.Sales   Vnđ</span>
                                    }
                                    else
                                    {
                                        <span>@aProduct.ProductCost vnđ</span>
                                    }
                                </div>
                            </div>
                        </div>
                        <span class="rating">

                            @if (aProduct.ProductStatus)
                            {
                                <span style="color: red; font-weight: bold">Giảm giá @aProduct.ProductSales %</span> 
                            }
                            else
                            {
                                <span>HOT</span> 
                            }
                            (@aProduct.ProductNumber)
                        </span>
                    </a>
                    <ul class="list">

                        <li>@Html.ActionLink(" ", "ProductDetail", "Shop", new { pProductId = @aProduct.ProductId }, null)
                            <img src="images/plus.png" alt="">
                            <ul class="icon1 sub-icon1 profile_img">
                                @Html.ActionLink(" ", "ProductDetail", "Shop", new { pProductId = @aProduct.ProductId }, null)
                                <li>@Html.ActionLink(" ", "ProductDetail", "Shop", new { pProductId = @aProduct.ProductId }, null)
                                    @Html.ActionLink("Sản phẩm mới", "ProductDetail", "Shop", new { pProductId = @aProduct.ProductId }, new { @class = "active-icon c1" })
                                    <ul class="sub-icon1 list">
                                        <li>
                                            <h3>sed diam nonummy</h3>
                                            <a href=""></a></li>
                                        <li>
                                            <p>Đàn Guitar, consectetuer  <a href="">adipiscing elit, sed diam</a></p>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
                            if (j == 3)
                            {
                    
                @Html.Raw(ViewBag.Data2)
                                j = 0;
                <div class="clear"></div>
                            }
            }
            @if (ViewBag.Product.Count % 3 != 0)
            {
                @Html.Raw(ViewBag.Data2)
                <div class="clear"></div>
            }
        </div>
    </div>
</div>
